<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>文都云协同</title>
    <link href="../../css/bootstrap.css" rel="stylesheet" >
    <style type="text/css">
        html{
            height:100%;
        }
        body{
            height:100%;
            margin:0px;
        }
        .my-container{
            width:100%;
            height:100%;
            background-color: #2D93CA;

            position: relative;/* 相对于自身正常位置的定位 */
        }

        .my-title{
            position: absolute;/*相对于父元素的定位*/
            left:0px;
            top:0px;
            width:100%;
            height:50px;
            background-color: #0c4128;


        }

        .my-nav{
            position: absolute;/*相对于父元素的定位*/
            left:0px;
            top:50px;
            bottom:0px;
            width:179px;

            background-color: #FFFFFF;

            border-right:1px solid #EEEEEE;
            box-shadow: 0px 10px 0px 10px #EEEEEE;
        }

        .my-content{
            position: absolute;/*相对于父元素的定位*/
            left:180px;
            right:0px;
            top:50px;
            bottom:30px;
            background-color: #FFFFFF;
        }

        .my-content>iframe{
            width:100%;
            height:100%;
            border:none;
        }


        .my-bottom{
            position: absolute;/*相对于父元素的定位*/
            left:180px;
            right:0px;
            bottom:0px;
            height: 30px;

            background-color: #0c4128;
        }

        .my-title .title{
            color:#CCCCCC;
            font-size:26px;
            font-weight: bold;
            line-height: 50px;
            padding-left:5px;
        }

        .my-title>.curruser{
            position: absolute;
            right:10px;
            bottom:5px;
            color:white;
            font-size:14px;
            cursor:pointer;


        }

        .my-nav .my-submenu{
            display: flex;/* 设置本块为flex布局（灵活盒子布局），则可以灵活控制内部元素布局 */
            flex-direction: column;/* 内部元素竖排*/
        }

        .my-nav .my-submenu>a{
            height:30px;
            line-height: 30px;
        }

        .my-nav .my-submenu>a:link,.my-nav .my-submenu>a:visited{
            text-decoration: none;
            color:#333333;
        }

        .my-nav .my-submenu>a:hover{
            text-decoration: none;
            color:#0c63e4;
            font-weight: bold;

        }

    </style>
</head>
<body>
<div id="app" class="my-container">
    <div class="my-title">
        <div class="title">文都云协同</div>
        <div class="curruser dropdown">
            <span class="dropdown-toggle" data-bs-toggle="dropdown" >当前用户：{{currentUser.userName}}【{{currentUser.userId}}】</span>
            <ul class="dropdown-menu" >
                <li><a class="dropdown-item" href="#">密码修改</a></li>
                <li><a class="dropdown-item" href="#">个人信息</a></li>
                <li><a class="dropdown-item" href="#"  @click="exit" >退出系统</a></li>
            </ul>
        </div>
    </div>
    <div class="my-nav">

        <div class="accordion" id="my-menu">
            <!-- 菜单单元开始 -->
            <div class="accordion-item" v-for="menu in menuList" :key="menu.menuId">
                <h2 class="accordion-header" :id="'menu-'+menu.menuId">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#sub-'+menu.menuId" >
                        {{menu.menuName}}
                    </button>
                </h2>
                <div :id="'sub-'+menu.menuId" class="accordion-collapse collapse" data-bs-parent="#my-menu">
                    <div class="accordion-body my-submenu">
                        <a v-for="sub in menu.children" :key="sub.menuId" :href="sub.menuUrl" target="contentWin" >{{sub.menuName}}</a>
                        
                    </div>
                </div>
            </div>
            <!-- 菜单单元结束 -->

            

        </div>


    </div>
    <div class="my-content"><iframe name="contentWin" src="welcome.html"></iframe></div>
    <div class="my-bottom"></div>
</div>


<script src="../../layer/jquery-3.6.0.min.js"></script>
<script src="../../layer/layer.js"></script>

<script src="../../js/bootstrap.bundle.min.js"></script>
<script src="../../js/vue.global.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../js/wendu.js"></script>

<script>

const app = {
    setup(){
        //数据打桩
        const menuList = Vue.ref([
            {
                menuId:1,
                menuName:'主菜单1',
                children:[
                    {
                        menuId:11,
                        menuName:'子菜单11',
                        menuUrl:'/xxx/yyy/yyy1.html'
                    },
                    {
                        menuId:12,
                        menuName:'子菜单12',
                        menuUrl:'/xxx/yyy/yyy2.html'
                    }
                ]
            },
            {
                menuId:2,
                menuName:'主菜单2',
                children:[
                    {
                        menuId:2,
                        menuName:'子菜单21',
                        menuUrl:'/aaa/yyy/yyy1.html'
                    },
                    {
                        menuId:12,
                        menuName:'子菜单22',
                        menuUrl:'/aaa/yyy/yyy2.html'
                    }
                ]
            }
        ]);

        req(ajax.get('/security/home/menu-list'),result=>{
            menuList.value = result.data;
        });

        // ajax.get('/security/home/menu-list').then(response=>{
        //     menuList.value = response.data.data;
        // });

        //当前用户
        const currentUser = Vue.ref({});//如果响应式数据需要整体替换，应当使用ref

        //获得当前用户信息
        const getCurrentUser = ()=>{

            req(ajax.get('/security/home/curr-user'),result=>{
                currentUser.value = result.data;
            });
            // ajax.get('/security/home/curr-user').then(res=>{
            //     if(res.data.success){
            //         currentUser.value = res.data.data;
            //     }else{
            //         layer.msg(res.data.message, { icon: 2 });
            //     }
                
            // });
        };

        getCurrentUser();

        const exit = ()=>{
            req(ajax.delete('/security/home/curr-user'),result => {
                localStorage.removeItem('WD-TOKEN');
                layer.msg("您已成功退出系统！", { icon: 1 ,time : 2000},()=>{
                    location.href="/login.html";
                });
            })
        };

        return {
            menuList,
            currentUser,
            getCurrentUser,exit

        };
    }
};

Vue.createApp(app).mount("#app");



</script>

</body>
</html>